<template>
	<div class="wrapper">
		<div class="">
			<van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
				<van-tab :title="item.tabName" v-for="(item,index) in tabList" :key="index" :name="index" />
			</van-tabs>
		</div>
		<div class="dis" style="position: absolute;left: 0;">
			<div class="choice_box dia" style="justify-content: space-between;">
				<div class="today dis " :class="activeTime==0?'week':'today_week'" @click="quantum(0)">
					当日
				</div>
				<div class="today dis today_letf" :class="activeTime==1?'week':'today_week'" @click="quantum(1)">
					本周
				</div>
				<div class="today dis today_letf" :class="activeTime==2?'week':'today_week'" @click="quantum(2)">
					本月
				</div>
				<div class="today dis today_letf" :class="activeTime==3?'week':'today_week'" @click="quantum(3)">
					全部
				</div>
			</div>
		</div>
		<div class="among_box">
			<img src="../../assets/terminal/among.png" alt="" class="among" />
		</div>

		<div class="dis seniority">
			<div class="">

				<div class="main">
					<div class="main_title">
						<div class="">
							排行
						</div>
						<div class="">
							代理商编号
						</div>
						<div class="">
							代理商名称
						</div>
						<div class="" v-if="active==0">
							唤醒数(台)
						</div>
						<div class="" v-else-if="active==1">
							交易金额(万)
						</div>
						<div class="" v-else-if="active==2">
							绑定数(台)
						</div>
						<div class="" v-else-if="active==3">
							收益金额(元)
						</div>
					</div>

					<div class="main_scroll" v-if="active!=0&&active!=2">
						<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="initialc"
							:immediate-check="false">
							<div class="main_list" v-for="(item,index) in list" :key="index">
								<div class="main_box">
									<div class="dia main_circulation" style="justify-content: space-between;">
										<div class="dis" v-if="item.rankNo==1">
											<img src="../../assets/terminal/first.png" alt="" class="image_among" />
										</div>
										<div class="dis" v-else-if="item.rankNo==2">
											<img src="../../assets/terminal/second.png" alt="" class="image_among" />
										</div>
										<div class="dis" v-else-if="item.rankNo==3">
											<img src="../../assets/terminal/thirdly.png" alt="" class="image_among" />
										</div>
										<div class="dis image_among" v-else>
											{{item.rankNo}}
										</div>
										<div class="agentNo_box dis">
											{{item.agentNo}}
										</div>
										<div class="agentName_box dis">
											{{item.agentName}}
										</div>
										<div class="count_box dis">
											{{item.count}}
										</div>

									</div>

								</div>
							</div>
						</van-list>

					</div>
					<div class="main_scroll" v-else>
						<!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
							@load="initialc" :immediate-check="false"> -->
						<div class="main_list" v-for="(item,index) in list" :key="index">
							<div class="main_box">
								<div class="dia main_circulation" style="justify-content: space-between;">
									<div class="dis" v-if="item.rankNo==1">
										<img src="../../assets/terminal/first.png" alt="" class="image_among" />
									</div>
									<div class="dis" v-else-if="item.rankNo==2">
										<img src="../../assets/terminal/second.png" alt="" class="image_among" />
									</div>
									<div class="dis" v-else-if="item.rankNo==3">
										<img src="../../assets/terminal/thirdly.png" alt="" class="image_among" />
									</div>
									<div class="dis image_among" v-else>
										{{item.rankNo}}
									</div>
									<div class="agentNo_box dis">
										{{item.agentNo}}
									</div>
									<div class="agentName_box dis">
										{{item.agentName}}
									</div>
									<div class="count_box dis">
										{{item.count}}
									</div>

								</div>

							</div>
						</div>
						<!-- </van-list> -->

					</div>

				</div>

			</div>

		</div>
	</div>
</template>

<script>
	import {
		selectActiveRanking,
		selectTradeRanking,
		selectBindRanking,
		selectProfitRanking
	} from '@/api/terminal'
	import store from '@/store'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			// const router = useRouter()
			const state = reactive({
				tabList: [{
						tabName: "唤醒排行"
					},
					{
						tabName: "交易排行"
					},
					{
						tabName: "绑定排行"
					},
					{
						tabName: "收益排行"
					}
				],
				pageStart: 1,
				pageSize: 40,
				list: [],
				loading: false,
				finished: false,
				active: 0,
				activeTime: 0,
				startTime: "",
				endTime: ""
			})
			//切换时间
			const quantum = (e) => {
				state.activeTime = e
				if (e == 1) {
					const currentDate = ref(new Date().toISOString().split('T')[0]);
					const date = new Date(currentDate.value);
					date.setDate(date.getDate() - 6);
					// return ;
					state.startTime = date.toISOString().split('T')[0]
					state.startTime = state.startTime.split('-')
					state.startTime = state.startTime[0] + '.' + state.startTime[1] + '.' + state.startTime[2]

					console.log('本周', state.startTime)
				} else if (e == 2) {
					const currentDate = ref(new Date().toISOString().split('T')[0]);
					const date = new Date(currentDate.value);
					date.setDate(date.getDate() - 29);
					// return ;
					state.startTime = date.toISOString().split('T')[0]
					state.startTime = state.startTime.split('-')
					state.startTime = state.startTime[0] + '.' + state.startTime[1] + '.' + state.startTime[2]
				} else if (e == 3) {
					state.startTime = ''
					state.endTime = ''
				}
				if (e != 3) {
					getThatday()
				}
				timeTab()
			}
			//timeTab切换
			const timeTab = () => {
				state.pageStart = 1
				state.pageSize = 40
				state.loading = false
				state.finished = true
				state.list = []
				
				// initialc()
				if (state.active == 0) {
					getFindPageList()
				} else if (state.active == 1) {
					getdealList()
				} else if (state.active == 2) {
					getboundList()
				} else if (state.active == 3) {
					getearningsList()
				}
			}
			//获取当前时间
			const getThatday = () => {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 注意月份从0开始，需要加1
				let day = currentDate.getDate();
				// state.endDate.push(year)
				// state.endDate.push(month)
				// state.endDate.push(day)
				state.endTime = year + '.' + month + '.' + day
				if (state.activeTime == 0) {
					state.startTime = year + '.' + month + '.' + day
				}
				// state.maxDate = new Date(year, month, day)
				console.log('当日时间', state.startTime, state.endTime)
			}
			getThatday()
			//下拉加载
			const initialc = () => {
				if (state.active == 0) {
					getFindPageList()
				} else if (state.active == 1) {
					getdealList()
				} else if (state.active == 2) {
					getboundList()
				} else if (state.active == 3) {
					getearningsList()
				}
			}
			//tab切换
			const tabDitch = () => {
				state.pageStart = 1
				state.pageSize = 40
				state.loading = false
				state.finished = true
				state.list = []
				state.activeTime=0
				getThatday()
				// initialc()
				if (state.active == 0) {
					getFindPageList()
				} else if (state.active == 1) {
					getdealList()
				} else if (state.active == 2) {
					getboundList()
				} else if (state.active == 3) {
					getearningsList()
				}
			}
			//获取收益排行榜
			const getearningsList = () => {
				selectProfitRanking({
					pageStart: state.pageStart,
					pageSize: state.pageSize,
					startTime: state.startTime,
					endTime: state.endTime
				}).then(res => {
					if (res.data.records.length < 40) {
						state.finished = true
						state.loading = false
					} else {
						state.pageStart++
						state.finished = false
						state.loading = false

					}
					state.list = state.list.concat(res.data.records)
				}).catch(error => {
					console.error(error)
					// 处理错误情况
				})
			}
			//获取绑定排行榜
			const getboundList = () => {
				selectBindRanking({
					pageStart: state.pageStart,
					pageSize: 9999,
					startTime: state.startTime,
					endTime: state.endTime
				}).then(res => {
					// if (res.data.records.length < 40) {
					// 	state.finished = true
					// 	state.loading = false
					// } else {
					// 	state.pageStart++
					// 	state.finished = false
					// 	state.loading = false
					// }
					// state.list = state.list.concat(res.data.records)
					state.list = res.data.records
				}).catch(error => {
					console.error(error)
					// 处理错误情况
				})
			}
			//获取交易排行榜
			const getdealList = () => {
				selectTradeRanking({
					pageStart: state.pageStart,
					pageSize: state.pageSize,
					startTime: state.startTime,
					endTime: state.endTime
				}).then(res => {
					if (res.data.records.length < 40) {
						state.finished = true
						state.loading = false
					} else {
						state.pageStart++
						state.finished = false
						state.loading = false
					}
					state.list = state.list.concat(res.data.records)
				}).catch(error => {
					console.error(error)
					// 处理错误情况
				})
			}
			//获取唤醒排行榜
			const getFindPageList = () => {
				selectActiveRanking({
					pageStart: state.pageStart,
					pageSize: 9999,
					startTime: state.startTime,
					endTime: state.endTime
				}).then(res => {
					// if (res.data.records.length < 40) {
					// 	state.finished = true
					// 	state.loading = false
					// } else {
					// 	state.pageStart++
					// 	state.finished = false
					// 	state.loading = false
					// }
					// state.list = state.list.concat(res.data.records)
					state.list = res.data.records
				}).catch(error => {
					console.error(error)
					// 处理错误情况
				})
			}
			getFindPageList()
			onMounted(() => {
				// 禁止滚动
				document.body.classList.add('noscroll');


			});
			return {
				...toRefs(state),
				getFindPageList,
				tabDitch,
				initialc,
				quantum,
				getThatday
				// getdealList,
				// getboundList,
				// getearningsList
			}
		}

	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #fff9f9;
		overflow: hidden;

		.among_box {
			// position: absolute;
			// top: 0;
		}

		.choice_box {
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 20px;
			justify-content: space-between;
			width: 100%;

			.today_letf {
				margin-left: 14px;
			}

			.week {
				background: #FF2828;
				color: #FFFFFF;
			}

			.today_week {
				color: #333333;
				background: #fff;
			}

			.today {
				width: 75px;
				height: 32px;

				border-radius: 4px 4px 4px 4px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;

			}
		}

		.among {
			width: 100%;
		}

		.seniority {
			position: absolute;
			top: 32%;
			left: 50%;
			transform: translateX(-50%);

			.main {
				width: 350px;
				padding: 10px 6px;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12px;

				.main_scroll {
					height: 400px;
					overflow: scroll;
					overflow-y: auto;
				}

				.main_title {
					width: 328px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 12px;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #FF2828;
					height: 34px;
					background: linear-gradient(90deg, rgba(255, 157, 157, 0) 0%, #FF9D9D 51%, rgba(255, 157, 157, 0) 100%, rgba(255, 157, 157, 0) 100%);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid;
					border-image: linear-gradient(90deg, rgba(255, 111.00000098347664, 111.00000098347664, 0), rgba(253.48214864730835, 81.87697291374207, 81.87697291374207, 0.534246563911438), rgba(255, 111.00000098347664, 111.00000098347664, 0)) 1 1;

					img {
						width: 23px;
						height: 26px;
					}

				}
			}

			.main_list {
				.main_circulation {
					margin-top: 12px;
					padding: 0px 14px 0px 14px;
					box-sizing: border-box;

					.agentNo_box {
						width: 100px;
					}

					.agentName_box {
						width: 80px;
					}

					.count_box {
						width: 80px;
					}
				}

				// background-color: #fff;
				.image_among {
					width: 23px;
					height: 26px;
				}
			}
		}
	}
</style>